<template>
  <div class="up-ui-content">
    <div class="up-ui-components">
      <div class="content">
        <van-button @click="show = !show">显示对话框</van-button>
      </div>
      <div class="content">
        <van-button @click="showPopup = !showPopup">显示popup</van-button>
      </div>
      <div class="content">
        <van-button @click="showLoading">显示loading</van-button>
      </div>
      <div class="content">
        <van-button @click="showDatePicker = true">显示改造的选择框</van-button>
      </div>
    </div>
    <van-popup v-model="showDatePicker" round position="bottom">
      <van-datetime-picker
        v-model="selectDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="showDatePicker=false"
        @cancel="showDatePicker=false"
      >
        <div class="time-slot">
          <div class="resume-operation-btn-box">
            <div class="operation-btn-cancel">
              <van-button
                block
                round
                plain
                type="info"
                @click="showDatePicker = false"
              >关 闭
              </van-button>
            </div>
            <div class="operation-btn-submit">
              <van-button
                color="#6971f6"
                block
                round
                type="primary"
                @click="getTimeData"
              >确 定
              </van-button>
            </div>
          </div>
        </div>
        <div class="time-slot-new">
          <div class="picker-title">
            <span>选择日期</span>
          </div>
          <div class="picker-close">
            <img @click="showDatePicker = false" class="picker-close-img" src="../../assets/image/close.png" alt="" srcset="">
          </div>
        </div>
      </van-datetime-picker>
    </van-popup>
    <!-- 如果不写v-model:show="show"，则需要在取消和确定方法控制show -->
    <up-dialog
      v-model:show="show"
      :show="show"
      :message="message"
      :title="title"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
    />
    <up-popup
      v-model:show="showPopup"
      :upStyle="{ height: '30%' }"
      :onClickOverlay="true"
      :show="showPopup"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
    >
      <div>123123</div>
    </up-popup>
  </div>
</template>

<script>
import upDialog from '../../components/common/dialog/dialog.vue'
import upPopup from '../../components/common/popup/popup.vue'
export default {
  name: 'up-local-ui',
  components: {
    'up-dialog': upDialog,
    'up-popup': upPopup
  },
  data () {
    return {
      minDate: new Date(1949, 0, 1),
      maxDate: new Date(),
      showDatePicker: false,
      selectDate: new Date(),
      typeOptions: [],
      show: false,
      showPopup: false,
      message: '代码是写出来给人看的，附带能在机器上运行',
      title: '温馨提示'
    }
  },
  mounted () {
  },
  methods: {
    getTimeData () {
      const value = this.selectDate
      const month = value.getMonth() + 1 < 10 ? '0' + String(value.getMonth() + 1) : String(value.getMonth() + 1)
      const day = value.getDate() < 10 ? '0' + String(value.getDate()) : String(value.getDate())
      // const currentTime = parseInt(String(value.getFullYear()) + month + day) // 将时间字符串转数字
      const timeStr = value.getFullYear() + '-' + month + '-' + day
      // this.searchInfo.startTime = timeStr
      this.showDatePicker = false
      // if (this.currentTypeTime === 'startTime') {
      //   let countArr = []
      //   if (this.searchInfo.endTime) {
      //     countArr = this.searchInfo.endTime.split('-')
      //     if (currentTime > parseInt(countArr[0] + countArr[1] + countArr[2])) {
      //       this.$toast('开始时间不能大于结束时间')
      //     } else {
      //       this.searchInfo.startTime = timeStr
      //     }
      //   } else {
      //     this.searchInfo.startTime = timeStr
      //   }
      // } else {
      //   let countArr = []
      //   if (this.searchInfo.startTime) {
      //     countArr = this.searchInfo.startTime.split('-')
      //     if (currentTime < parseInt(countArr[0] + countArr[1] + countArr[2])) {
      //       this.$toast('结束时间不能小于开始时间')
      //     } else {
      //       this.searchInfo.endTime = timeStr
      //     }
      //   } else {
      //     this.searchInfo.endTime = timeStr
      //   }
      // }
    },
    onConfirm () {
      console.log('父组件中确认后执行的内容')
      // this.show = false
    },
    onCancel () {
      console.log('父组件取消后执行的内容')
      // this.show = false
    },
    showLoading () {
      this.$loading.open('登录中...')
      setTimeout(() => {
        this.$loading.close()
      }, 2500)
    }
  }
}
</script>

<style lang="less" scoped>
.up-ui-content {
  height: 100vh;
  font-size: 14px;
}
.time-slot {
  width: 100%;
  position: fixed!important;
  bottom: -1px;
  padding-bottom: 10px;
  background-color: #fff!important;
  z-index: 10000;
  .resume-operation-btn-box {
    height: 40px;
    display: flex;
    & > div {
      flex: 50%;
      padding: 0 30px;
    }
  }
}
.time-slot-new {
  width: 100%;
  height: 50px;
  display: flex;
  position: absolute!important;
  top: 0;
  background-color: #fff!important;
  z-index: 1000000000;
  .picker-title {
    flex: 85%;
    line-height: 50px;
    & > span {
      display: block;
      padding-left: 15px;
      font-size: 16px;
      color: #878df7;
    }
  }
  .picker-close {
    flex: 15%;
    position: relative;
    line-height: 50px;
    text-align: right;
    &-img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 15px;
    }
  }
}
</style>
